<template>
  <div class='storage-goods'>
    <a-card class='left'>
      <a-tree
        checkable
        :show-line='showLine'
        :default-expanded-keys="['0-0-0', '0-0-1', '0-0-2']"
        @select='onSelect'
      >
        <template #icon>
          <carry-out-outlined />
        </template>
        <a-tree-node key='0-0'>
          <template #icon>
            <carry-out-outlined />
          </template>
          <template #title><span style='color: #1890ff'>parent 1</span></template>
          <a-tree-node title='parent 1-0' key='0-0-0'>
            <template #icon>
              <carry-out-outlined />
            </template>
            <a-tree-node title='leaf' key='0-0-0-0'>
              <template #icon>
                <carry-out-outlined />
              </template>
            </a-tree-node>
            <a-tree-node title='leaf' key='0-0-0-1'>
              <template #icon>
                <carry-out-outlined />
              </template>
            </a-tree-node>
            <a-tree-node title='leaf' key='0-0-0-2'>
              <template #icon>
                <carry-out-outlined />
              </template>
            </a-tree-node>
          </a-tree-node>
          <a-tree-node title='parent 1-1' key='0-0-1'>
            <template #icon>
              <carry-out-outlined />
            </template>
            <a-tree-node title='leaf' key='0-0-1-0'>
              <template #icon>
                <carry-out-outlined />
              </template>
            </a-tree-node>
          </a-tree-node>
          <a-tree-node title='parent 1-2' key='0-0-2'>
            <template #icon>
              <carry-out-outlined />
            </template>
            <a-tree-node title='leaf' key='0-0-2-0'>
              <template #icon>
                <carry-out-outlined />
              </template>
            </a-tree-node>
            <a-tree-node title='leaf' key='0-0-2-1'>
              <template #icon>
                <carry-out-outlined />
              </template>
              <template #switcherIcon>
                <form-outlined />
              </template>
            </a-tree-node>
          </a-tree-node>
        </a-tree-node>
      </a-tree>
    </a-card>
    <a-card class='right'>
      <div class='conditionSearch'>
        <a-space>
          <span>
            箱子编号:
            <a-select class='searchItem' v-model:value='selectedBox'>
              <a-select-option :value="null">请选择</a-select-option>
              <a-select-option v-for="item in box" :value="item.id" :key="item.id">{{item.box_code}}</a-select-option>
            </a-select>
          </span>
          <span>
            入库时间:
            <a-range-picker v-model:value="createTime" class='searchItem datePicker' />
          </span>
          <span>
            更新时间:
            <a-range-picker v-model:value="updateTime" class='searchItem datePicker' />
          </span>
          <span>
            状态:
            <a-select class='searchItem' v-model:value='selectedStatus'>
              <a-select-option :value="null">请选择</a-select-option>
              <a-select-option :value='1'>正常</a-select-option>
              <a-select-option :value='0'>禁用</a-select-option>
            </a-select>
          </span>
          <span>
            是否编码:
            <a-select  class='searchItem' v-model:value='selectedCode'>
              <a-select-option :value="null">请选择</a-select-option>
              <a-select-option :value='1'>是</a-select-option>
              <a-select-option :value='0'>否</a-select-option>
            </a-select>
          </span>
          <span>
            类型:
            <a-select  class='searchItem' v-model:value='selectedType'>
              <a-select-option :value="null">请选择</a-select-option>
              <a-select-option :value='0'>普通</a-select-option>
              <a-select-option :value='1'>退回</a-select-option>
            </a-select>
          </span>
        </a-space>
        <a-space>
          <a-button type='primary' @click="searchBtn">查询</a-button>
          <a-button @click="resetBtn">重置</a-button>
        </a-space>
      </div>
      <ele-pro-table class='table' :row-selection="rowSelection" :row-key="id" :datasource="table" :columns="columns">
        <template #toolbar>
          <a-space>
            <a-button type='primary'>
              <template #icon>
                <PlusOutlined />
              </template>
              新建
            </a-button>
            <a-button type='primary' danger>
              <template #icon>
                <DeleteOutlined />
              </template>
              删除
            </a-button>
            <a-button>登记入库</a-button>
            <a-button>回收站</a-button>
          </a-space>
        </template>
        <template #fnsku={text}>
          {{text?"是":"否"}}
        </template>
        <template #type={text}>
          {{text?"退回":"普通"}}
        </template>
        <template #status={text}>
          {{text?"正常":"禁用"}}
        </template>
        <!-- 操作 -->
        <template #operation="{record}">
            <span style='color: #1890FF;' @click="editRow(record)">修改</span>&nbsp;
            <span style='color: red' @click="delRow(record)">删除</span>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
</template>

<script>
import {
  PlusOutlined,
  FormOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'

export default {
  components: {
    PlusOutlined,
    FormOutlined,
    DeleteOutlined
  },
  data() {
    return {
      box:[],
      selectedBox:null,
      createTime:[],
      updateTime:[],
      selectedStatus:null,
      selectedCode:null,
      selectedType:null,
      table:[],
      columns: [
        {
          title: '编号',
          dataIndex: 'depot_product_id',
        },
        {
          title: '产品名称',
          dataIndex: 'depot_product.product_name'
        },
        {
          title: '箱子编号',
          dataIndex: 'box_id'
        },
        {
          title: '货架编号',
          dataIndex: 'box.shelf_code'
        },
        {
          title: '数量',
          dataIndex: 'number'
        },
        {
          title: '更新时间',
          dataIndex: 'update_time'
        },
        {
          title: '入库时间',
          dataIndex: 'create_time'
        },
        {
          title: '编码',
          dataIndex: 'is_fnsku',
          slots: {customRender: 'fnsku'}
        },
        {
          title: '类型',
          dataIndex: 'type',
          slots: {customRender: 'type'}
        },
        {
          title: '状态',
          dataIndex: 'status',
          slots: {customRender: 'status'}
        },
        {
          title: '操作',
          slots: { customRender: 'operation' }
        }
      ],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected, selectedRows)
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows)
        }
      }
    }
  },
  methods:{
    searchBtn(){
      this.$http({
        url:"/depot/stock",
        method:"get",
        params:{
          box_code:this.selectedBox,
          create_time_start:this.createTime.length?this.createTime[0].format("YYYY-MM-DD"):null,
          create_time_end:this.createTime.length?this.createTime[1].format("YYYY-MM-DD"):null,
          update_time_start:this.updateTime.length?this.updateTime[0].format("YYYY-MM-DD"):null,
          update_time_end:this.updateTime.length?this.updateTime[1].format("YYYY-MM-DD"):null,
          status:this.selectedStatus,
          is_fnsku:this.selectedCode,
          type:this.selectedType
        }
      }).then(result=>{
        console.log(result.data.data.list);
        this.table = result.data.data.list;
      }).catch(error=>{
        console.log(error)
      })
    },
    resetBtn(){
      this.selectedBox = null;
      this.createTime = [];
      this.updateTime = [];
      this.selectedStatus = null;
      this.selectedCode = null;
      this.selectedType =null;
      this.getTable();
    },
    getBox(){
      this.$http({
        url:"/depot/box",
        method:"get"
      }).then(result=>{
        this.box = result.data.data.list;
      }).catch(error=>{
        console.log(error);
      })
    },
    getTable(){
      this.$http({
        url:"/depot/stock",
        method:"get"
      }).then(result=>{
        // console.log(result.data.data.list);
        this.table = result.data.data.list;
      }).catch(error=>{
        console.log(error);
      })
    },

    editRow(record){
      console.log(record);
    },
    delRow(record){
      console.log(record.id);
    }
  },
  created() {
    this.getBox();
    this.getTable();
  }
}
</script>

<style scoped>
.storage-goods {
  width: 100%;
  height: 100%;
  display: flex;
}

.storage-goods .left {
  width: 15%;
  margin: 1%;
}

.storage-goods .right {
  width: 82%;
  margin: 1% 1% 1% 0;
}

.storage-goods .right .conditionSearch {
  display: flex;
  justify-content: space-between;
}

.storage-goods .right .conditionSearch .searchItem {
  width: 100px;
}
.storage-goods .right .conditionSearch .searchItem.datePicker{
  width: 200px;
}
.storage-goods .right .table {
  margin-top: 2%;
}
</style>
